<template>
  <div class="demo">
    <ToolBar>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="add()">添加</el-button>
      <div style="float: right">
        <el-input
                placeholder="搜索"
                size="small"
                style="width: 140px"
                v-model="searchParams.name"
                clearable>
        </el-input>
        <el-button type="success" icon="el-icon-search" size="small" @click="getList()"></el-button>
      </div>
    </ToolBar>
    <div >
      <el-row>
        <el-col v-for="course in tableData" :span="4" style="height: 300px;margin: 20px">
          <el-card :body-style="{ padding: '0px' }">
            <img v-if="course.image" :src="course.image" style="width: 100%" class="image">
            <img v-if="!course.image"
                 src="https://dpic.tiankong.com/6a/fw/QJ6364729411.jpg?x-oss-process=style/shows_794"
                 style="width: 100%;height: 200px;" class="image">
            <div>
              <h3>{{ course.name }}</h3>
              <div>时长：{{ course.time }}</div>
              <div>
                <el-button type="primary" title="编辑" icon="el-icon-edit" circle></el-button>
                <el-button type="danger" title="删除" icon="el-icon-delete" @click="del(course.id)" circle></el-button>
                <el-button type="info" title="课程内容" icon="el-icon-document" @click="linkContent(course.id)" circle></el-button>
                <el-button type="warning" title="讲师" icon="el-icon-service" @click="teacher(course.id)" circle></el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <course-add
            :title="title"
            :dialogFormVisible="visible"
            :data="data"
            @val-change="addCourse"
            @cancel="visible = false"/>
    <content-add
            :content-id="contentId"
            :title="contentTitle"
            :dialogFormVisible="contentVisible"
            :data="contentData"
            @val-change="addContent"
            @cancel="contentVisible = false"
    />
  </div>
</template>

<script>
    import business from './../../../api/business';
    import ToolBar from '~/components/ToolBar/ToolBar.vue';
    import HelpHint from '~/components/HelpHint/HelpHint.vue';
    import CourseAdd from '~/views/ContentManage/course/CourseAdd.vue';
    import ContentAdd from '~/views/ContentManage/course/ContentAdd.vue';

    const {courseList, courseDelete, courseAdd, contentAdd} = business
    export default {
        data() {
            return {
                title: '课程添加',
                data: false,
                visible: false,
                contentTitle: '课程内容',
                contentData: false,
                contentVisible: false,
                contentId: '',
                page: {
                    total: 0
                },
                searchParams: {
                    page: 1,
                    size: 5,
                    name: 'published',
                },
                tableData: []
            }
        },
        created: function () {
            this.getList()
        },
        methods: {
            getList() {
                courseList(this.searchParams).then((response) => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                })
            },
            add() {
                this.visible = true
            },
            linkContent(id) {
                this.contentVisible = true
                this.contentId = id
            },
            del(id) {
                courseDelete(id).then(() => {
                    this.$message.success("删除成功!")
                    this.getList()
                })
            },
            addCourse(row) {
                courseAdd(row).then(()=>{
                    this.visible = false
                    this.$message.success("添加成功!")
                    this.getList()
                })
            },
            addContent(row) {
                contentAdd(row).then(()=>{
                    this.contentVisible = false
                    this.$message.success("添加成功!")
                    this.getList()
                })
            }
        },
        components: {
            ContentAdd,
            CourseAdd,
            ToolBar,
            HelpHint
        }
    }
</script>

<style lang="less">
  .demo {
    margin: 10px;

    .grid-content {
      border-radius: 4px;
      overflow: hidden;
      color: #fff;
      background: #d3dce6;

      .index-icon {
        font-size: 82px;
        color: #fff;
      }
    }
  }
</style>